<template>
  <el-card>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="4">
        <el-input placeholder="请输入内容" v-model="nameValue"></el-input>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="4">
        <el-button type="primary" @click="getTableData">查询</el-button>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="4">
        <el-button type="primary" @click="addTable(0)">新增</el-button>
        <el-button type="primary" @click="exportExcel()">导出数据</el-button>
      </el-col>
    </el-row>
  </el-card>
  <el-card shadow="hover" class="card_table">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="dataTime" label="Date" width="180"/>
      <el-table-column prop="phone" label="手机号" width="180"/>
      <el-table-column prop="address" label="地址"/>
      <el-table-column prop="name" label="名字"/>
      <el-table-column>
        <template #default="scope">
          <el-button @click="onRowedit(scope.row,1)">编辑</el-button>
          <el-button @click="onRowdel(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="table_buttom">
      <el-button @click="refresh">refresh</el-button>
    </div>
    <editDiong ref="editRef" @update="edit"/>
  </el-card>
</template>

<script setup lang="ts">
import {ref, reactive, onMounted, defineAsyncComponent, defineExpose} from "vue";
import {getTableDataApi} from './component/tableHook.ts'

const editDiong = defineAsyncComponent(() => import('./component/EditTable.vue'))
import {inTableGet, editTableRow, deleteTable, onRegisterLogin} from '../../api/table/index'
import {ElMessage, ElMessageBox} from "element-plus/es";

const tableData = ref([])
const nameValue = ref()
const editRef = ref()
const getTableData = () => {
  const param = {
    name: nameValue.value
  }
  inTableGet(param).then((res: any) => {
    console.log(res)
    if (res) {
      tableData.value = res.data
    } else {
      ElMessage.error(res.error);
    }
  })
}
const onRowedit = (row: any, index: any) => {
  console.log(editRef.value)
  editRef.value.openDialog(row, index)
}
const edit = async (oldRow: any) => {
  if (oldRow.dialogTitle == '新增') {
    const res = await onRegisterLogin(oldRow)
    console.log(res)
    if (res.code == 200) {
      editRef.value.closeDialog()
      ElMessage.success(res.message)
      getTableData()
    } else {
      ElMessage.error(res.error)
    }
  } else {
    const res = await editTableRow(oldRow)
    console.log(res)
    if (res.code == 200) {
      editRef.value.closeDialog()
      ElMessage.success(res.success)
      getTableData()
    } else {
      ElMessage.error(res.error)
    }
  }
}
const addTable = (index: any) => {
  editRef.value.openDialog(index)
}
const onRowdel = (row: any) => {
  ElMessageBox.confirm('您确定删除当前操作人嘛?', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
    center: true,
  }).then(() => {
    const param = {
      id: row.id
    }
    deleteTable(param).then((res) => {
      if (res.code == 200) {
        ElMessage.success(res.success)
        getTableData()
      } else {
        ElMessage.error(res.msg)
      }
    })
  })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '您已取消操作',
        })
      })
}
const exportExcel = () => {
  const column = [
    {title: '日期', key: 'dataTime', type: 'text'},
    {title: '手机号', key: 'phone', type: 'text'},
    {title: '地址', key: 'address', type: 'text', width: 50, height: 50},
    {title: '名字', key: 'name', type: 'text', width: 50, height: 50},
  ]
}
const refresh = () => {
  getTableData()
}
onMounted(() => {
  getTableData()
})

</script>


<style scoped lang="scss">
.card_table {
  flex: 1;
}

.table_buttom {
  margin-top: 10px;
}
</style>
